<template>
	<view class="merchant-list">
		<g-navbar title="全部商户" />
		<scroll-view scroll-y class="merchant-list-wrapper" @scrolltolower="scrolltolower">
			<merchantItem v-for="item in merchantList" :key="item.id" :detail="item" />
			<uni-load-more :status="pagination.loadingStatus" />
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import merchantItem from './components/merchant-item/merchantItem.vue';
	import { useStore } from 'vuex';
	import type { IMerchant } from './components/merchant-item/types';
	import type { IPagination, IReqeustOptions, IRequest } from './types';
	import { reactive } from "vue";
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import REST_URL from '@/http/http.restUrl';
	import { onLoad } from '@dcloudio/uni-app';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	const store = useStore();

	const pagination : IPagination = reactive({
		pageNum: 1,
		pageSize: 10,
		loadingStatus: LOADING_STATUS.MORE
	})

	const merchantList : IMerchant[] = reactive([]);

	const getMerchanList = async () : Promise<void> => {
		if (pagination.loadingStatus !== LOADING_STATUS.MORE) return
		const options : IReqeustOptions = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page: pagination.pageNum,
			page_num: pagination.pageSize
		}
		pagination.loadingStatus = LOADING_STATUS.LOADING;
		const { data, total } : IRequest = (await uni.http.POST(REST_URL.getMerchanList, options)).data;
		console.log(data);
		console.log(total);
		merchantList.push(...data);
		pagination.pageNum++;
		pagination.loadingStatus = merchantList.length >= total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
	}

	const scrolltolower = () : void => {
		getMerchanList();
	}

	onLoad(async () => {
		await uni.loginManger.$interceptor;
		getMerchanList();
	})
</script>

<style scoped lang="scss">
	@import "./merchantList.scss";
</style>